<template>
  <div class="AddOrUpdate_main add_container column_one">
    <div class="main_main">
      <el-form ref="form" :model="formData" :rules="rules" :inline="true">
        <!-- <el-form-item label="客户名称" prop="type" class="clickChoose">
          <el-input v-model="formData.tenantName" placeholder="请选择" readonly />
          <a class="clickChoose_button" @click.prevent="chooseCustomer">
            <svg-icon icon-class="选择弹框" />
          </a>
        </el-form-item> -->
        <el-form-item label="模版名称" prop="name">
          <el-select v-if="!id" v-model="formData.name" placeholder="请选择">
            <el-option
              v-for="item in templateList"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
          <el-input v-else v-model="formData.name" placeholder="请输入" disabled />
        </el-form-item>
        <el-form-item label="报表id" prop="reportId">
          <el-input v-model="formData.reportId" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="菜单路由" prop="menuPath">
          <el-input v-model="formData.menuPath" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="视图id" prop="viewPath">
          <el-input v-model="formData.viewPath" placeholder="请输入" clearable />
        </el-form-item>
      </el-form>
    </div>
    <div class="main_bottom">
      <el-button type="cancel" @click.stop="cancel">取消</el-button>
      <el-button @click.stop="onSubmit">保存</el-button>
    </div>
  </div>
</template>

<script>
import { addOrUpdate, getInfo, list } from '@/api/superManage/reportForm'
import ChooseCustomer from './chooseCustomers.vue'
export default {
  name: 'AddOrUpdate',
  props: {
    layerid: {},
    id: {},
    tenantId: {},
    defaultValue: {}
  },
  data() {
    return {
      formData: {
        id: undefined,
        tenantName: '',
        tenantId: '',
        menuPath: '',
        viewPath: '',
        reportId: '',
        name: ''
      },
      templateList: [],
      pageData: {
        pageNum: 1,
        pageSize: 20,
        orderByColumn: 'updateTime',
        tenantId: -1,
        isAsc: 'desc'
      },
      supplierTableList: [],
      typeTableList: [],
      num: 1,
      roleOptions: [],
      rules: {
        menuPath: [
          { required: true, message: '路由地址不能为空', trigger: 'blur' }
        ],
        viewPath: [
          { required: true, message: '查看地址不能为空', trigger: 'blur' }
        ],
        reportId: [
          { required: true, message: '报表编码不能为空', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '模版名称不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    if (!this.id) { // 没有id就是新增
      this.getTemplate()
      Object.keys(this.defaultValue).forEach(key => { // 给右边数据赋值
        this.formData[key] = this.defaultValue[key]
      })
    } else { // 有id就是编辑
      this.getInfo()
    }
  },
  mounted() {
  },
  methods: {
    getTemplate() {
      list(this.pageData).then(res => {
        this.templateList = res.data
      })
    },
    getInfo() {
      getInfo(this.id).then(res => {
        Object.keys(this.formData).forEach(key => { // 给右边数据赋值
          this.formData[key] = res.data[key]
        })
      })
    },
    onSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.formData.tenantId = this.tenantId ? this.tenantId : ''
          addOrUpdate(this.formData).then(res => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.$layer.close(this.layerid) // 关闭弹框
            this.$parent.refresh() // 调用父组件的刷新方法
          })
        }
      })
    },

    // 选择客户名称
    chooseCustomer() {
      this.$layer.iframe({// 弹框
        content: {
          content: ChooseCustomer, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
            id: this.formData.type ? this.formData.type : ''
          }// props
        },
        area: ['880px', '570px'],
        title: '选择客户', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    chooseInfo(data) {
      this.formData.tenantId = data.id
      this.formData.tenantName = data.name
      console.log(data)
    },
    cancel() {
      this.$layer.close(this.layerid)// 关闭弹框
    }
  }
}
</script>

<style lang="less" scoped>
</style>
